<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCountStore } from '@/stores/count';
const countStore = useCountStore();


// 动画效果
const isVisible = ref(false)

onMounted(() => {
  // 组件挂载后触发动画
  setTimeout(() => {
    isVisible.value = true
  }, 100)
})
</script>

<template>
    <div 
      class="relative w-auto flex flex-col lg:flex-row rounded-4xl m-4 lg:m-6 p-6 lg:p-8 xl:w-[600px] min-h-[280px] lg:min-h-[320px] transition-all duration-500 transform hover:scale-105 hover:shadow-2xl"
      :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
      style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    >
      <!-- 背景装饰 -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-4xl"></div>
      
      <!-- 头像区域 -->
      <div class="flex flex-col items-center lg:items-start lg:pr-8 mb-4 lg:mb-0 justify-center">
        <div class="relative group">
          <!-- 头像光晕效果 -->
          <div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-pink-400 rounded-full blur opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
          <img 
            src="@/assets/logo.png" 
            alt="头像" 
            class="relative w-[100px] h-[100px] lg:w-[120px] lg:h-[120px] xl:w-[140px] xl:h-[140px] rounded-full border-4 border-white shadow-lg transition-transform duration-300 group-hover:scale-110" 
          />
        </div>
      </div>

      <!-- 数据统计区域 -->
      <div class="flex-1 flex flex-col justify-center">
        <!-- 标题区域 -->
        <div class="text-center lg:text-left mb-4 lg:mb-6">
          <div class="text-white font-semibold text-lg lg:text-xl mb-1">博客数据</div>
          <div class="text-white/70 text-sm">内容统计概览</div>
        </div>
        
        <!-- 内容统计 -->
        <div class="grid grid-cols-3 gap-2 lg:gap-3">
          <div class="bg-white/15 backdrop-blur-sm rounded-xl p-3 lg:p-4 text-center transition-all duration-300 hover:bg-white/25 hover:scale-105 group">
            <div class="text-xl lg:text-2xl mb-1">📝</div>
            <div class="text-white/80 text-xs lg:text-sm mb-1">文章</div>
            <div class="text-lg lg:text-xl font-bold text-white group-hover:text-yellow-200 transition-colors">{{ countStore.articleCount }}</div>
          </div>
          <div class="bg-white/15 backdrop-blur-sm rounded-xl p-3 lg:p-4 text-center transition-all duration-300 hover:bg-white/25 hover:scale-105 group">
            <div class="text-xl lg:text-2xl mb-1">🖼️</div>
            <div class="text-white/80 text-xs lg:text-sm mb-1">图库</div>
            <div class="text-lg lg:text-xl font-bold text-white group-hover:text-green-200 transition-colors">{{ countStore.galleryCount }}</div>
          </div>
          <div class="bg-white/15 backdrop-blur-sm rounded-xl p-3 lg:p-4 text-center transition-all duration-300 hover:bg-white/25 hover:scale-105 group">
            <div class="text-xl lg:text-2xl mb-1">📔</div>
            <div class="text-white/80 text-xs lg:text-sm mb-1">随笔</div>
            <div class="text-lg lg:text-xl font-bold text-white group-hover:text-blue-200 transition-colors">{{ countStore.diaryCount }}</div>
          </div>
        </div>
        
        <!-- 总计信息 -->
        <div class="mt-4 lg:mt-6 text-center">
          <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-full px-4 py-2">
            <span class="text-white/80 text-sm mr-2">总计</span>
            <span class="text-white font-bold text-lg">{{ countStore.articleCount + countStore.galleryCount + countStore.diaryCount }}</span>
            <span class="text-white/60 text-sm ml-1">篇</span>
          </div>
        </div>
      </div>

      <!-- 装饰元素 -->
      <div class="absolute top-3 right-3 lg:top-4 lg:right-4 text-white/20 text-xl lg:text-2xl">📊</div>
      <div class="absolute bottom-3 left-3 lg:bottom-4 lg:left-4 text-white/20 text-lg lg:text-xl">✨</div>
    </div>
</template>

<style scoped>
/* 自定义动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 玻璃拟态效果增强 */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
}

/* 平滑过渡 */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
